:root {
    --main-color: #e01912;
    --main-color2: #31e719;
    --main-color3: #f5f108;
    --main-color4: #0993f0;
    --main-color5: #f0f0f0;
    --dh: 0s;
    /* 初始化为0，避免动画立即开始 */
}

.dhBox {
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    background-color: #ebe9e9;
    gap: 150px;
}

.circle {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: var(--main-color2);
    transform: translateX(-50%);
    position: relative;
    animation: move 2s linear forwards paused;
    animation-delay: var(--dh);
    /* 使用CSS变量控制延迟 */
}

.slider {
    width: 200px;
}

@keyframes move {
    0% {
        transform: translateX(-95px) scale(2);
    }

    50% {
        background-color: var(--main-color3);
        transform: scale(1);
    }

    100% {
        transform: translateX(100px) scale(3);
        background-color: var(--main-color);
    }
}